<template>
  <div id="app">
    <div class="container mx-auto p-6">
      <h1 class="text-3xl font-bold text-center mb-10 text-gray-800">Vue2 任意两个div之间连线示例</h1>
      
      <div class="bg-white rounded-lg shadow-xl p-8 max-w-4xl mx-auto">
        <LineConnector ref="lineConnector">
          <!-- 可连接的元素 -->
          <div id="box1" class="w-32 h-32 bg-blue-500 rounded-lg shadow-md flex items-center justify-center text-white cursor-move"
               @mousedown="startDrag('box1', $event)">
            Box 1
          </div>
          
          <div id="box2" class="w-32 h-32 bg-green-500 rounded-lg shadow-md flex items-center justify-center text-white cursor-move"
               @mousedown="startDrag('box2', $event)">
            Box 2
          </div>
          
          <div id="box3" class="w-32 h-32 bg-red-500 rounded-lg shadow-md flex items-center justify-center text-white cursor-move"
               @mousedown="startDrag('box3', $event)">
            Box 3
          </div>
          
          <div id="box4" class="w-32 h-32 bg-purple-500 rounded-lg shadow-md flex items-center justify-center text-white cursor-move"
               @mousedown="startDrag('box4', $event)">
            Box 4
          </div>
        </LineConnector>
        
        <div class="mt-8 flex justify-center space-x-4">
          <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-300"
                  @click="addDefaultLines">
            添加默认连线
          </button>
          <button class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors duration-300"
                  @click="addBezierLine">
            添加贝塞尔曲线
          </button>
          <button class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 transition-colors duration-300"
                  @click="clearLines">
            清除所有连线
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineConnector from './components/LineConnector.vue';

export default {
  name: 'App',
  components: {
    LineConnector
  },
  data() {
    return {
      isDragging: false,
      draggedElementId: null,
      initialX: 0,
      initialY: 0,
      currentX: 0,
      currentY: 0
    };
  },
  mounted() {
    // 设置元素位置
    this.$nextTick(() => {
      this.setElementPosition('box1', 50, 50);
      this.setElementPosition('box2', 300, 50);
      this.setElementPosition('box3', 50, 250);
      this.setElementPosition('box4', 300, 250);
    });
  },
  methods: {
    startDrag(elementId, event) {
      this.isDragging = true;
      this.draggedElementId = elementId;
      this.initialX = event.clientX;
      this.initialY = event.clientY;
      
      const element = document.getElementById(elementId);
      const style = window.getComputedStyle(element);
      const matrix = new DOMMatrix(style.transform);
      
      this.currentX = matrix.e;
      this.currentY = matrix.f;
      
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    
    drag(event) {
      if (!this.isDragging) return;
      
      event.preventDefault();
      
      const dx = event.clientX - this.initialX;
      const dy = event.clientY - this.initialY;
      
      this.currentX = this.currentX + dx;
      this.currentY = this.currentY + dy;
      
      this.initialX = event.clientX;
      this.initialY = event.clientY;
      
      this.setElementPosition(this.draggedElementId, this.currentX, this.currentY);
      this.$refs.lineConnector.updateAllLines();
    },
    
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    
    setElementPosition(elementId, x, y) {
      const element = document.getElementById(elementId);
      if (element) {
        element.style.transform = `translate(${x}px, ${y}px)`;
      }
    },
    
    addDefaultLines() {
      this.$refs.lineConnector.removeAllLines();
      
      // 添加几条连线
      this.$refs.lineConnector.addLine({
        from: 'box1',
        to: 'box2',
        stroke: '#3b82f6',
        strokeWidth: 2
      });
      
      this.$refs.lineConnector.addLine({
        from: 'box1',
        to: 'box3',
        stroke: '#3b82f6',
        strokeWidth: 2
      });
      
      this.$refs.lineConnector.addLine({
        from: 'box2',
        to: 'box4',
        stroke: '#3b82f6',
        strokeWidth: 2,
        arrow: true
      });
      
      this.$refs.lineConnector.addLine({
        from: 'box3',
        to: 'box4',
        stroke: '#3b82f6',
        strokeWidth: 2,
        dashArray: '5,5'
      });
    },
    
    addBezierLine() {
      this.$refs.lineConnector.addLine({
        from: 'box1',
        to: 'box4',
        type: 'bezier',
        stroke: '#8b5cf6',
        strokeWidth: 3,
        arrow: true
      });
    },
    
    clearLines() {
      this.$refs.lineConnector.removeAllLines();
    }
  }
}
</script>

<style>
#app {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.primary {
  color: #3b82f6;
}

.bg-primary {
  background-color: #3b82f6;
}
</style>  